<template>
    <div :id="conf.boxid"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive } from 'vue'

const sid = StrUtil.getId()
const conf = reactive({
    boxid: 'canvas_snow-' + sid,
    itemid: 'canvas_sakura-' + sid
})

let stopFun: any

const onresize = () => {
    const dom = document.getElementById(conf.boxid)
    if (dom) {
        const rect = dom.getBoundingClientRect()
        innerHeight = rect.height
        innerWidth = rect.width
        let canvasSnow: any = document.getElementById(conf.itemid)
        canvasSnow.width = innerWidth
        canvasSnow.height = innerHeight
    }
}

onMounted(() => {
    const rect = document.getElementById(conf.boxid)!.getBoundingClientRect()
    let innerHeight = rect.height
    let innerWidth = rect.width

    //樱花

    let img = new Image()
    img.src = '/#{static}/bg/yh.png'
    let Sakura: any = function (x: any, y: any, s: any, r: any, fn: any) {
        //@ts-ignore
        this.x = x
        //@ts-ignore
        this.y = y
        //@ts-ignore
        this.s = s
        //@ts-ignore
        this.r = r
        //@ts-ignore
        this.fn = fn
    }

    Sakura.prototype.draw = function (cxt: any) {
        cxt.save()
        cxt.translate(this.x, this.y)
        cxt.rotate(this.r)
        cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
        cxt.restore()
    }

    Sakura.prototype.update = function () {
        this.x = this.fn.x(this.x, this.y)
        this.y = this.fn.y(this.y, this.y)
        this.r = this.fn.r(this.r)
        if (this.x > innerWidth || this.x < 0 || this.y > innerHeight || this.y < 0) {
            this.r = getRandom('fnr')
            if (Math.random() > 0.4) {
                this.x = getRandom('x')
                this.y = 0
                this.s = getRandom('s')
                this.r = getRandom('r')
            } else {
                this.x = innerWidth
                this.y = getRandom('y')
                this.s = getRandom('s')
                this.r = getRandom('r')
            }
        }
    }

    let SakuraList: any = function () {
        //@ts-ignore
        this.list = []
    }
    SakuraList.prototype.push = function (sakura: any) {
        this.list.push(sakura)
    }
    SakuraList.prototype.update = function () {
        for (let i = 0, len = this.list.length; i < len; i++) {
            this.list[i].update()
        }
    }
    SakuraList.prototype.draw = function (cxt: any) {
        for (let i = 0, len = this.list.length; i < len; i++) {
            this.list[i].draw(cxt)
        }
    }
    SakuraList.prototype.get = function (i: any) {
        return this.list[i]
    }
    SakuraList.prototype.size = function () {
        return this.list.length
    }

    function getRandom(option: any) {
        let ret: any, random: any
        switch (option) {
            case 'x':
                ret = Math.random() * innerWidth
                break
            case 'y':
                ret = Math.random() * innerHeight
                break
            case 's':
                ret = Math.random()
                break
            case 'r':
                ret = Math.random() * 6
                break
            case 'fnx':
                random = -0.5 + Math.random() * 1
                ret = function (x: any, y: any) {
                    return x + 0.5 * random - 1.7
                }
                break
            case 'fny':
                random = 1.5 + Math.random() * 0.7
                ret = function (x: any, y: any) {
                    return y + random
                }
                break
            case 'fnr':
                random = Math.random() * 0.03
                ret = function (r: any) {
                    return r + random
                }
                break
        }
        return ret
    }

    function startSakura() {
        let canvas = document.createElement('canvas'),
            cxt: any
        canvas.height = innerHeight
        canvas.width = innerWidth
        canvas.setAttribute('style', 'position: absolute;left: 0;top: 0;pointer-events: none;object-fit:cover;')
        canvas.setAttribute('id', conf.itemid)
        document.getElementById(conf.boxid)!.appendChild(canvas)
        cxt = canvas.getContext('2d')
        let sakuraList = new SakuraList()
        for (let i = 0; i < 50; i++) {
            let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR
            randomX = getRandom('x')
            randomY = getRandom('y')
            randomR = getRandom('r')
            randomS = getRandom('s')
            randomFnx = getRandom('fnx')
            randomFny = getRandom('fny')
            randomFnR = getRandom('fnr')
            sakura = new Sakura(randomX, randomY, randomS, randomR, {
                x: randomFnx,
                y: randomFny,
                r: randomFnR
            })
            sakura.draw(cxt)
            sakuraList.push(sakura)
        }

        stopFun = function () {
            cxt.clearRect(0, 0, canvas.width, canvas.height)
            sakuraList.update()
            sakuraList.draw(cxt)
            //@ts-ignore
            requestAnimationFrame(stopFun)
        }

        requestAnimationFrame(stopFun)
    }

    img.onload = function () {
        startSakura()
    }

    window.addEventListener('resize', onresize)
})

onUnmounted(() => {
    window.removeEventListener('resize', onresize)
    window.cancelAnimationFrame(stopFun)
    let child = document.getElementById(conf.itemid)
    //@ts-ignore
    child?.parentNode?.removeChild(child)
})
</script>
<style lang="less" scoped></style>
